<!DOCTYPE html>
<html lang="zh" mode="light" xmlns:th="http://www.thymeleaf.org">

<head>
    <div th:replace="~{theme/Grace/common :: meta}"></div>
    <meta property="og:title" th:content="${'友链 | ' + #servletContext.getAttribute('configMap')['blog_name']}" />
    <title>友链 | [[${#servletContext.getAttribute('configMap')['blog_name']}]]</title>
    <div th:replace="~{theme/Grace/common :: link}"></div>
</head>

<body>
<!-- 导航 -->
<div th:replace="~{theme/Grace/common :: nav}"></div>
<div class="wrap" id="wrap">
    <!-- 头部 -->
    <header class="header">
        <!-- 封面 -->
        <div class="cover">
            <span th:if="${#strings.startsWith(currentNav.cover,'http')}">
                <img class="lazyload" th:data-original="@{${currentNav.cover}}">
            </span>
            <span th:if="${#strings.startsWith(currentNav.cover,'http') == false}">
                <img class="lazyload" th:data-original="@{${prefix} + '/source/images/friendLink.png'}">
            </span>
        </div>

        <!-- 商标 -->
        <div class="brand animate-box" data-animate-effect="fadeIn">
            <p class="title"><span class="title-head">『</span> 友链 <span class="title-tail">』</span></p>
            <p class="sub-title"></p>
        </div>
    </header>
    <!-- 主要内容 -->
    <main class="main">
        <div class="container">
            <div class="friend-link-detail">
                <div class="friend-link">
                    <h3 class="link-title blogger-link-title"><i class="fa fa-address-card-o"></i> 本站信息</h3>
                    <ul class="blogger-link-info">
                        <li>站名: [[${#servletContext.getAttribute('configMap')['blog_name']}]]</li>
                        <li>地址: [[${#servletContext.getAttribute('configMap')['home_page']}]]</li>
                        <li>Logo: [[${#servletContext.getAttribute('configMap')['logo_url']}]]</li>
                        <li>描述: [[${#servletContext.getAttribute('configMap')['description']}]]</li>
                    </ul>
                </div>
                <div class="friend-link tool-link">
                    <h3 class="link-title tool-link-title"><i class="fa fa-battery "></i> 学习与工具</h3>
                    <div class="links" th:if="${#lists.isEmpty(webSiteList) == false}">
                        <div class="item" th:each="link,iterStat: ${webSiteList}" th:style="'--block-color:' + ${link.backgroundColor} ">
                            <img class="lazyload image" th:if="${#strings.isEmpty(link.logo) == false}" th:data-original="@{${link.logo}}">
                            <span th:if="${#strings.isEmpty(link.logo)}">
                                <svg t="1610115165665" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2832" width="48" height="48"><path d="M981.76 81.024c-56.384-56.896-147.712-56.896-204.032 0l-360.704 364.16 204.032 206.08 360.704-364.16C1038.144 230.144 1038.144 137.92 981.76 81.024zM539.456 449.664l-24.32-24.512 305.024-308.032c6.656-6.72 17.536-6.72 24.384 0 6.656 6.72 6.656 17.728 0 24.512L539.456 449.664zM590.272 500.864 565.888 476.352l330.432-333.504c6.656-6.784 17.536-6.784 24.32-0.064 6.656 6.784 6.656 17.728-0.128 24.512L590.272 500.864zM641.024 552.128 616.64 527.616 921.6 219.648c6.656-6.784 17.536-6.72 24.256 0s6.656 17.728 0 24.512L641.024 552.128z" p-id="2833" fill="#515151"></path><path d="M351.296 816.64 332.8 797.952 502.784 626.24 435.968 558.72 265.92 730.432 247.744 712.064 207.744 733.12 74.048 951.744 113.856 992 328.576 858.24Z" p-id="2834" fill="#515151"></path><path d="M227.904 32c-19.584 0-38.4 2.752-56.512 7.424C173.184 41.024 175.296 42.24 176.96 44.032l82.176 82.944c41.856 42.24 41.856 110.848 0 153.088-41.856 42.24-109.76 42.24-151.616 0L25.344 197.184C21.056 192.832 17.472 188.032 14.016 183.168 5.12 207.872 0 234.304 0 262.08 0 389.12 102.016 492.096 227.904 492.096c125.824 0 227.84-103.04 227.84-230.08C455.744 134.976 353.664 32 227.904 32z" p-id="2835" fill="#515151"></path><path d="M924.224 942.016c49.408-49.984 49.408-131.008 0-180.992l-182.016-183.616-179.264 180.864 182.144 183.744C794.56 991.936 874.752 991.936 924.224 942.016zM802.752 819.328c20.48-20.672 53.632-20.672 74.112 0s20.48 54.208 0 74.944c-20.48 20.608-53.632 20.608-74.112 0C782.272 873.472 782.272 840 802.752 819.328z" p-id="2836" fill="#515151"></path></svg>
                            </span>
                            <div class="info">
                                <a th:href="@{${link.homeUrl}}" class="title" th:text="${link.title}" target="_blank"></a>
                                <p th:text="${link.remark}"></p>
                            </div>
                        </div>
                    </div>
                    <div th:if="${#lists.isEmpty(webSiteList)}" style="text-align: center;animation: slowUp 2s">暂无数据</div>
                </div>
                <div class="friend-link blog-link">
                    <h3 class="link-title blog-link-title"><i class="fa fa-exchange"></i> 小伙伴们</h3>
                    <div class="links">
                        <div class="item" th:each="link,iterStat: ${bloggerList}" th:style="'--block-color:' + ${link.backgroundColor} ">
                            <img class="lazyload image" th:if="${#strings.isEmpty(link.logo) == false}" th:data-original="@{${link.logo}}">
                            <span th:if="${#strings.isEmpty(link.logo)}">
                                <svg t="1610115308931" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5146" width="48" height="48"><path d="M656.79 499.92A241.63 241.63 0 0 0 754 306c0-133.65-108.35-242-242-242S270 172.35 270 306a241.63 241.63 0 0 0 97.21 193.92C190.84 560.12 64 727.25 64 924a36 36 0 0 0 72 0c0-207.66 168.34-376 376-376s376 168.34 376 376a36 36 0 0 0 72 0c0-196.75-126.84-363.88-303.21-424.08zM342 306a170 170 0 1 1 170 170 170 170 0 0 1-170-170z" p-id="5147" fill="#515151"></path></svg>
                            </span>
                            <div class="info">
                                <a th:href="@{${link.homeUrl}}" class="title" th:text="${link.title}" target="_blank"></a>
                                <p th:text="${link.remark}"></p>
                            </div>
                        </div>
                    </div>
                    <div th:if="${#lists.isEmpty(bloggerList)}" style="text-align: center;animation: slowUp 2s">~~虚席以待~~</div>
                </div>
                <div class="friend-link apply-for">
                    <h3 class="link-title apply-for-title"><i class="fa fa-bell-o"></i> 申请友链条件</h3>
                    <ol class="apply-for-info">
                        <li>先友后链，申请前请先提前做好本站友情链接</li>
                        <li>不接受新站链接（3个月以内）</li>
                        <li>不与内容污秽、暴力的、广告挂马的网站交换</li>
                        <li>优先和具有原创作品的全站 HTTPS 站点交换</li>
                        <li>申请方式请在下方留言区留言, 格式如上文本站信息</li>
                    </ol>
                </div>
            </div>

            <!-- 评论区 -->
            <div th:replace="~{theme/Grace/common :: comment}"></div>

        </div>
    </main>
</div>
<!-- 尾部 -->
<div th:replace="~{theme/Grace/common :: footer}"></div>
<div th:replace="~{theme/Grace/common :: script}"></div>
</body>

</html>
